<template>
  <header class="l_header">
    <div class="wrapper">
      <div class="nav-main container container--flex">
        <a class="logo flat-box waves-effect waves-block" href="javacript:void(0);" style="color: #ffffff">
          蒼河白日夢 Blog
        </a>
        <div class="menu">
          <ul class="h-list">
            <li>
              <a class="flat-box nav-about waves-effect waves-block" href="javacript:void(0);">
                <i class="fa fa-home"></i>
                主页
              </a>
            </li>
            <li>
              <a class="flat-box nav-projects waves-effect waves-block" v-on:click="jump({name: 'myProject'})">
                <i class="fa fa-cube"></i>
                项目
              </a>
            </li>
            <li class="active">
              <a class="flat-box nav-home active waves-effect waves-block" v-on:click="jump({name: 'home'})">
                <i class="fa fa-rss"></i>
                博客
              </a>
            </li>
            <li class="">
              <a class="flat-box nav-archives waves-effect waves-block" v-on:click="jump({name: 'archives'})">
                <i class="fa fa-archive"></i>
                归档
              </a>
            </li>
          </ul>
          <div class="underline" style="left: 137.15px; width: 66px;"></div>
        </div>
        <div class="m_search">
          <form name="searchform" class="form u-search-form">
            <input type="text" class="input u-search-input" placeholder="Search">
            <span class="icon"><i class="fa fa-search"></i></span>
          </form>
        </div>
        <ul class="switcher h-list">
          <li class="s-search"><a href="javascript:void(0)"><i class="fa fa-search flat-box waves-effect waves-block"></i></a></li>
          <li class="s-menu"><a href="javascript:void(0)"><i class="fa fa-navicon flat-box waves-effect waves-block"></i></a></li>
        </ul>
      </div>
    </div>
  </header>
</template>

<script>
   import './style/style.less'
  export default {
    name: 'HelloWorld',
    props: ['msg'],
    data() {
      return {
        //msg: 'Welcome to Your Vue.js App'
      }
    },
    created: function() {
      //console.log(this.$options.parent.menth())
      //this.add();
      this.goToFatherDetail();
    },
    methods: {
      goToFatherDetail (itemId) {
        // this.$parent.$router.push('goToDetail');
        console.log('子组件方法走了' + itemId);
        this.$emit('menth', itemId); /* itemId就是子要传的数据 - 这里很重要,refreshbizlines就是父组件$on监测的自定义函数不是父组件的自定义函数。*/
      },
      jump: function (router) {
        this.$router.push(router);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
